<style scoped>
    .input {
        width: 150px;
    }
</style>
<template>
    <el-form :inline="true" :model="searchForm">
        <el-form-item label="表名（EN）">
            <el-input size="small" class="input" v-model="searchForm.ename" placeholder="表名（EN）"/>
        </el-form-item>
        <el-form-item label="表名（ZH）">
            <el-input size="small" class="input" v-model="searchForm.cname" placeholder="表名（ZH）"/>
        </el-form-item>
        <el-form-item label="锁定状态">
            <el-select size="small" class="input" v-model="searchForm.lock" placeholder="锁定状态">
                <el-option label="全部"   :value="''"/>
                <el-option label="未锁定" :value="0"/>
                <el-option label="已锁定" :value="1"/>
            </el-select>
        </el-form-item>
        <el-form-item label="版本号">
            <el-select size="small" class="input" v-model="searchForm.version" placeholder="版本号">
                <el-option label="全部" :value="''"/>
                <el-option v-for="item in versions" :label="item" :value="item"/>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button size="small" type="primary" @click="getData">查询</el-button>
            <el-button size="small" type="primary" @click="save">新增</el-button>
        </el-form-item>
    </el-form>
    <el-table class="table" :data="tables" :border="true" v-loading="load" :header-cell-style="{'background': '#f4f2f2'}">
        <el-table-column prop="ename" label="表名（EN）" width="180"/>
        <el-table-column prop="cname" label="表名（CN）" width="180"/>
        <el-table-column label="是否锁定">
            <template #default="scope">
                <el-button v-if="scope.row.lock === 1" size="small" type="danger" :disabled="true">已锁定</el-button>
                <el-button v-else size="small" type="success" @click="lock(scope.row)">未锁定</el-button>
            </template>
        </el-table-column>
        <el-table-column prop="version" label="版本号" width="180"/>
        <el-table-column>
            <template #default="scope">
                <el-button size="small" type="primary" :disabled="scope.row.lock === 1" @click="edit(scope.row)">修改</el-button>
                <el-button size="small" type="danger" :disabled="scope.row.lock === 1" @click="remove(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <table-edit ref="refTableEdit" @search="getData"/>
</template>
<script>
import {ref, getCurrentInstance, onMounted} from 'vue'
import TableEdit from "./TableEdit"
export default {
    name: "Table",
    setup(props, context) {

        let { ctx } = getCurrentInstance();  // 组件上下文对象
        let searchForm = ref({});            // 查询组件的表单
        let versions = ref([]);              // 版本号选择列表
        let tables = ref([]);                // 表格数据
        let load = ref(false);               // 加载状态（变量名不能使用 loading，原因未知）

        /**
         * 获取版本号列表
         */
        function getVersion() {
            ctx.axios.post("/table/listVersion").then((ret) => {
                if (ret.code === 200) {
                    versions.value = ret.data;
                } else {
                    ctx.$message({type: "warning", message: ret.msg});
                }
            })
        }

        /**
         * 请求数据的方法
         */
        function getData() {
            load.value = true;
            ctx.axios.post("/table/listVO", searchForm.value).then((ret) => {
                if (ret.code === 200) {
                    tables.value = ret.data;
                } else {
                    ctx.$message({type: 'warning', message: '查询失败'})
                }
                load.value = false;
            });
        }

        /**
         * 触发新增
         */
        function save() {
            ctx.$refs.refTableEdit.awake(0);
        }

        /**
         * 触发修改
         * @param row 原数据
         */
        function edit(row) {
            row = Object.assign({}, row);
            ctx.$refs.refTableEdit.awake(1, row);
        }

        /**
         * 删除数据
         */
        function remove() {
            ctx.$confirm('删除后将无法恢复，请谨慎删除！', '危险', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                ctx.axios.post("/table/remove/" + row.id).then((ret) => {
                    if (ret.code === 200) {
                        ctx.$message({type: 'success', message: ret.msg});
                        getData();
                    } else {
                        ctx.$message({type: 'warning', message: ret.msg});
                    }
                });
            }).catch(() => {});
        }

        /**
         * 锁定表格
         */
        function lock(row) {
            ctx.$confirm('锁定后将无法修改和删除，请仔细确认！', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'danger'
            }).then(() => {
                ctx.axios.post("/table/lock/" + row.id).then((ret) => {
                    if (ret.code === 200) {
                        ctx.$message({type: 'success', message: ret.msg});
                        getData();
                    } else {
                        ctx.$message({type: 'warning', message: ret.msg});
                    }
                });
            }).catch(() => {});
        }

        /**
         * 挂载完成后执行
         */
        onMounted(() => {
            getVersion();
            getData();
        })
        return {searchForm, versions, tables, load, getData, save, edit, remove, lock};
    },
    components: {TableEdit}
}
</script>
